<template>
	<view class="v-home-page" :style="{ '--bg-image': `url(${ materialBg})` }">
		<view :style="{ height: navTop + 'px' }"></view>

		<view id="barTitle" :style="{ opacity: opacityStyle, height: heightSystemss+Number(50) + 'px' }"
			v-show="!hiddenModel">
			<text>IP账号采集</text>
		</view>

		<view class="flex-start-center " style="color:#333333" @click="navBack()">

			<uni-icons style="margin-top: 7rpx;" color="#333333" type="left" size="20"></uni-icons>
			<text style="color: 333333;font-size: 33rpx;"> IP账号采集</text>
		</view>


		<view class="taskStatistics flex-between">
			<view class="flex-column">
				<view class="" style="color: #0184F0;font-weight: bold;font-size: 32rpx;">
					{{creationStatis.allCount}}
				</view>
				<view class="margin-top_16rpx">
					总任务
				</view>
			</view>
			<view class="flex-column">
				<view class="" style="color: #0184F0;font-weight: bold;font-size: 32rpx;">
					{{creationStatis.todayCount}}
				</view>
				<view class="" class="margin-top_16rpx ">
					成功任务
				</view>
			</view>
			<view class="flex-column">
				<view class="" style="color: #0184F0;font-weight: bold;font-size: 32rpx;">
					{{creationStatis.yesterdayCount}}
				</view>
				<view class="" class="margin-top_16rpx">
					失败任务
				</view>
			</view>
			<view class="flex-column">
				<view class="" style="color: #0184F0;font-weight: bold;font-size: 32rpx;">
					{{creationStatis.subCount}}
				</view>
				<view class="" class="margin-top_16rpx">
					作品列表
				</view>
			</view>
		</view>

		<view class="v-title flex-align-center">
			<text></text>
			<view>采集列表</view>
		</view>

		<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback"
			@up="upCallback" :up="upOption" :down="downOption">
			<view class="collectionList" v-for="(item,index) in list" :key="index">
				<view class="">
					<view class="padding-bottom_20rpx border-bottom-ECECEC">
						<view class="flex-between">
							<view class="font-weight_bold flex" @click="editFn(item)">
								<uni-icons color="#137DE0" type="compose" size="22"></uni-icons>
								<text style="margin-right: 10rpx;">{{item.name}}</text>
							</view>
							<view class="font-weight_bold" style="color: #6475FF;">
								<!-- 300条 -->
							</view>
						</view>

						<view class="flex-between margin-top_30rpx  ">
							<view class="" style="color: #999999;font-size: 26rpx;">
								创建时间：{{item.create_time}}
							</view>
							<view class="flex-start-center">
								<!-- <view class="flex" @click="viewDetail(item)">
									<text style="color: #FF3A3A;">列表</text>
									<image class="icon" :src="group3183" mode=""></image>
								</view>
								<view class="flex margin-left_20rpx">
									<text style="color: #0184F0;">编辑</text>
									<image class="icon" :src="group3182" mode=""></image>
								</view> -->
							</view>
						</view>
					</view>

					<view class="flex-between margin-top_30rpx">
						<view class="flex-start-center" style="color: #137DE0;">

							<!-- 	 
							 {{newData(item.url)?'':''}}
							  {{urlNum>=0?urlNum:'暂无新内容'}} -->

						</view>
						<view class="flex-between">
							<view class="worksBtn flex" @click="viewDetail(item)">

								<text>作品</text>
							</view>
							<view class="loopBtn flex margin-left_16rpx"
								@click="refreshFn(item.url,item.last_count,item.id)">
								<text style="margin-right: 5rpx;">刷新</text>
								<uni-icons color="#FFFFFF" type="loop" size="20"></uni-icons>
							</view>
						</view>
					</view>
				</view>

			</view>
		</mescroll-body>
		<sunui-popup ref="serviceItemsPopup">
			<template v-slot:content>

				<view class="serviceItemsContain ">
					<view class="top flex-between">
						<view class="">

						</view>
						<text>重新命名</text>
						<uni-icons @click='closeWriteOffIcon()' class="uniIcon" type="closeempty" size="22"
							style="color: #07070791;">
						</uni-icons>
					</view>

					<view class="card margin-bottom_50rpx">
						<view class="myNmae">

							<view class="">
								<input class="uni-inputsa" type="text" v-model="name" placeholder="请输入任务标题名称" />
							</view>


						</view>

					</view>

					<view class="PublishTags flex" @click="payNow(videoObj)">
						修改任务标题
					</view>

				</view>

			</template>
		</sunui-popup>

		<custom-tab-bar :items="tabItems" :currentIndex="currentTab" @item-click="onTabClick" :color="color"
			:selectedColor="selectedColor"></custom-tab-bar>







	</view>
</template>

<script>
	import CustomTabBar from '@/uni_modules/niceui-tabBar/components/niceui-tabBar/niceui-tabBar.vue';
	import {
		tabbar,
		tabbar1
	} from '@/uni_modules/niceui-tabBar/common/tabbar.js'
	export default {
		components: {
			CustomTabBar
		},
		data() {
			return {
				matrix12: this.$imgs.group3129,
				matrix13: this.$imgs.group3152,
				group3182: this.$imgs.group3182,
				group3183: this.$imgs.group3183,
				materialBg: this.$imgs.violet,
				navTop: '',

				currentTab: 2, // 当前选中的tab索引
				tabItems: tabbar.tabItems,
				color: tabbar.color,
				selectedColor: tabbar.selectedColor,
				creationStatis: {},
				list: [],
				workNum: '',
				urlNum: 0,
				tallySet: uni.getStorageSync('tallySet'),
				name: '',
				videoObj: '',
				hiddenModel: true, //显示影藏
				opacityStyle: 0, //透明度
				heightSystemss: ""


			}
		},
		onLoad() {
			const app = getApp();
			this.navTop = app.globalData.navTop;
			this.creationStatisFn()

			this.createdgetSystemInfo()



		},
		onShow() {
this.creationStatisFn()
			this.$nextTick(() => {
				this.mescroll.resetUpScroll();
			});


		},
		onPageScroll(ev) {


			if (ev.scrollTop > 10) {
				let opacity = ev.scrollTop / 140

				// this.opacityStyle = opacity > 1 ? 1 : opacity
				this.opacityStyle = 1
				this.hiddenModel = false
				// this.createdgetSystemInfo();

			} else {
				this.hiddenModel = true
			}
		},
		computed: {
			// newData: function() {
			// 	return async function(url) {
			// 		const result = await this.$http.get({
			// 			url: this.$api.homepageUserData,
			// 			data: {
			// 				url: url,
			// 				// uid: uni.getStorageSync('uid'),

			// 			}
			// 		});
			// 		if (result.errno == 0) {
			// 			console.log(result.data)

			// 			return  result.data


			// 		} else {
			// 			this.$sun.toast(result.message, 'none')
			// 		}
			// 	};
			// }

		},
		methods: {
			createdgetSystemInfo() {
				let menuButtonObject = uni.getMenuButtonBoundingClientRect(); //获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
				uni.getSystemInfo({
					//获取系统信息
					success: res => {
						let navHeight = menuButtonObject.height + (menuButtonObject.top - res
							.statusBarHeight) * 2; //导航栏高度=菜单按钮高度+（菜单按钮与顶部距离-状态栏高度）*2
						this.heightSystemss = navHeight;
						console.log(navHeight, '==========================')

					},
					fail(err) {
						console.log(err);
					}
				});
			},

			async payNow(item) {

				if (!this.name) {

					this.$sun.toast('请输入标题名称', 'none')
					return
				}

				const result = await this.$http.post({
					url: this.$api.homepageEdit,
					data: {
						uid: uni.getStorageSync('uid'),
						id: item.id,
						name: this.name,



					}
				});
				if (result.errno == 0) {
					this.$refs.serviceItemsPopup.close()
					this.$sun.toast(result.message, 'none')
					this.$nextTick(() => {
						this.mescroll.resetUpScroll();
					})
                    
					this.creationStatisFn()

				} else {
					this.$sun.toast(result.message, 'none')
				}

			},
			refreshFn(url, last_count, id) {
				this.newData(url)
				setTimeout(() => {
					if ((Number(this.urlNum) - Number(last_count)) == 0) {
						uni.showModal({
							title: '数据刷新',
							content: '当前为最新数据无需刷新',
							success: async (res) => {
								if (res.confirm) {
									this.$nextTick(() => {
										this.mescroll?.resetUpScroll();
									})



								} else if (res.cancel) {

								}
							}
						});

					} else {
						uni.showModal({
							title: '已经更新（' + (Number(this.urlNum) - Number(last_count)) + '）条作品',
							content: '本次刷新需要：' + (Number(this.urlNum) - Number(last_count)) * (this
								.tallySet.homepage_tally) + '点算力，是否要获取到最新数据',
							success: async (res) => {
								if (res.confirm) {
									const result = await this.$http.get({
										url: this.$api.homepageRefreshData,
										data: {
											// 用户id
											uid: uni.getStorageSync('uid'),
											task_id: id,



										}
									});
									if (result.errno == 0) {


										this.$sun.toast(result.message)
										this.$nextTick(() => {
											this.mescroll?.resetUpScroll();
										})
										
										this.creationStatisFn()

									} else {
										this.$sun.toast(result.message)
									}



								} else if (res.cancel) {

								}
							}
						});
					}




				}, 1200)
			},
			async newData(url) {
				const result = await this.$http.get({
					url: this.$api.homepageUserData,
					data: {
						url: url,
						// uid: uni.getStorageSync('uid'),

					}
				});
				if (result.errno == 0) {
					console.log(result.data)

					this.urlNum = result.data


				} else {
					this.$sun.toast(result.message, 'none')
				}
			},
			async getVideoCountFn() {
				const result = await this.$http.get({
					url: this.$api.homepageUserData,
					data: {
						url: this.url,
						// uid: uni.getStorageSync('uid'),

					}
				});
				if (result.errno == 0) {
					console.log(result.data)

					this.workNum = result.data


				} else {
					this.$sun.toast(result.message, 'none')
				}
			},
			closeWriteOffIcon() {
				this.$refs.serviceItemsPopup.close()
			},
			editFn(item) {
				this.videoObj = item
				this.$refs.serviceItemsPopup.show({
					anim: 'bottom',
					position: 'bottom',
					shadeClose: false, //false使用户不能点击其它关闭页面
					topclose: false,
					zIndex: 99999
				});
			},
			viewDetail(item) {
				console.log(item)

				this.$sun.navGo('/pagesA/creatCenter/ipAccountCollection/listWorks', {
					task_id: item.id,
					url: item.url
				})
			},
			async upCallback(scroll) {



				const result = await this.$http.post({
					url: this.$api.homepageList,
					data: {
						uid: uni.getStorageSync("uid"),

						page: scroll.num,
						limit: 10
					}
				});
				if (result.errno == 0) {

					this.mescroll.endByPage(result.data.list.length, result.data.total);
					if (scroll.num == 1) this.list = [];
					this.list = this.list.concat(result.data.list);
					console.log(this.list)
				}

			},
			async creationStatisFn() {
				const result = await this.$http.get({
					url: this.$api.creationStatis,
					data: {
						uid: uni.getStorageSync('uid'),
						type: 2

					}
				});
				if (result.errno == 0) {
					console.log(result.data)

					this.creationStatis = result.data

				} else {
					this.$sun.toast(result.message, 'none')
				}
			},
			navBack() {
				this.$sun.navSwitch('/pages/index/index')
			},

			onTabClick(index) { // 切换tab的函数，当选中某个tab时触发
				console.log(index, this.tabItems)
				//this.currentTab = index;
				if (index != this.currentTab) {
					if (index == 0) {
						uni.switchTab({
							url: this.tabItems[index].pagePath
						})
					} else {
						uni.navigateTo({
							url: this.tabItems[index].pagePath
						})
					}
				}
			}
		}
	}
</script>

<style lang="less">
	.v-home-page {
		background-image: (var(--bg-image));
		background-repeat: no-repeat;
		background-size: contain;
		position: relative;
		height: 100vh;
		padding: 20rpx;


		#barTitle {
			position: fixed;
			width: 750rpx;
			top: 0;
			left: 0;
			background: #fff;
			color: #000000;
			text-align: center;
			font-weight: bold;
			z-index: 9999
		}

		#barTitle>text {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 20rpx
		}

		.serviceItemsContain {
			padding: 0rpx 30rpx 30rpx 30rpx;
			background-color: #fff;

			height: auto;
			overflow-x: auto;

			.PublishTags {
				z-index: 99;
				margin-top: 10rpx;
				height: 102rpx;
				border-radius: 20rpx;
				color: #fff;


				bottom: 20rpx;
				background: rgb(120, 93, 246);
			}

			.myNmae {

				background-color: #fff;
				min-width: 50rpx;

				.avatar {
					width: 84rpx;
					height: 84rpx;
				}

				input {
					text-align: left;
				}

				.uni-input {

					height: 100rpx;
				}

				.uni-inputsa {
					width: 100%;
					height: 90rpx;
					border-radius: 20rpx;
					background: rgb(245, 245, 245);
					margin: 20rpx 0;
					padding: 0rpx 20rpx;
				}

				.uni-inputs {
					text-align: left !important;
				}

				.backgroundImg {

					height: 154rpx;


				}

			}





			.top {
				padding: 30rpx 0;
				width: 100%;

				text {
					color: rgb(0, 0, 0);
					font-size: 36rpx;
					font-weight: 400;
				}
			}

		}

		.worksBtn {
			/* 矩形 5861 */
			width: 144rpx;
			height: 64rpx;
			box-sizing: border-box;
			border: 2rpx solid rgba(19, 125, 224, 1);
			border-radius: 128rpx;

			background: rgba(255, 255, 255, 1);
			color: rgba(19, 125, 224, 1);
		}

		.loopBtn {
			width: 144rpx;
			height: 64rpx;
			box-sizing: border-box;
			// border: 2rpx solid rgba(19, 125, 224, 1);
			border-radius: 128rpx;

			background: rgba(19, 125, 224, 1);
			color: #fff;
		}

		.collectionList {
			margin-top: 20rpx;
			width: 709.7rpx;
			// height: 163.68rpx;
			padding: 20rpx;
			background-color: #fff;
			border-radius: 20rpx;

			.icon {
				width: 30rpx;
				height: 30rpx;
				margin: 0 5rpx;
				margin-bottom: 5rpx;
			}

		}


		.taskStatistics {
			margin-top: 40rpx;
			width: 709rpx;
			height: 154.88rpx;
			padding: 30rpx;

			border-radius: 20rpx;

			box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(1, 132, 240, 0.05);
			background: rgb(255, 255, 255);
		}

		.v-title {
			margin-top: 40rpx;
			// padding: 0rpx 26rpx 42rpx;

			text {
				width: 10rpx;
				height: 24rpx;
				border-radius: 138rpx;

				background: #7266FF;
			}

			view {
				margin-left: 10rpx;
				font-size: 34rpx;
				font-weight: bold;
			}
		}

	}
</style>